<template>
  <CraneComment
    :comment="data.comment"
    :submit="submit"
    :maxlength="800"
  ></CraneComment>
</template>

<script setup lang="ts">
import { nextTick, onMounted, reactive } from 'vue';
import { CraneComment } from 'crane-element';
import { Comment } from 'crane-element/lib/components/CraneComment/comment.types';
import {
  _addArticleComment,
  _articleCommentTree
} from '@/pages/index/index.service.ts';
import { CommentTree } from '@/pages/talk/talk.types.ts';
import { RetVO } from '@/http/public.type.ts';

const data = reactive({
  comment: [] as Comment[]
});

const props = defineProps({
  id: {
    type: String,
    required: true
  }
});

onMounted(() => {
  nextTick(() => {
    getCommentTree(props.id);
  });
});

function getCommentTree(id: string) {
  _articleCommentTree(id).then((res: RetVO<CommentTree[]>) => {
    data.comment = res.data;
  });
}
function submit(e: any) {
  if (!e.content) {
    return;
  }
  e.tid = props.id;
  _addArticleComment(e).then((res: RetVO<any>) => {
    if (res.code === 200) {
      getCommentTree(props.id);
    }
  });
}
</script>

<style scoped lang="less">
.talk-comment {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--background-secondary);
  color: var(--font-color);
  box-shadow: var(--crane-ring-offset-shadow, 0 0 #0000),
    var(--crane-ring-shadow, 0 0 #0000), var(--crane-shadow);
  border-radius: 15px;
  padding: 15px;
  box-sizing: border-box;
  margin-bottom: 20px;
}
</style>
